<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理1</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--    从后端获取数据-->
    <script>
        window.onload = function (){
            initData(1, 10)
        }
        function initData(page, size,name){
            console.log("加载学生列表：页码=" + page + ", 每页记录数=" + size);

            // 页码修正 - 防止传入小于1的页码
            if (page < 1) page = 1;

            $.ajax({
                url : 'students',
                type: 'GET',
                data:{
                    page: page, // 页码
                    size: size,  // 每页记录数,
                    name:name,
                    timestamp: new Date().getTime() // 添加时间戳防止缓存
                },
                dataType: 'json', // 明确指定期望返回JSON格式
                contentType: 'application/json; charset=utf-8', // 指定内容类型
                headers: {
                    'Accept': 'application/json', // 明确告诉服务器我们期望JSON响应
                    'X-Requested-With': 'XMLHttpRequest' // 标识这是一个Ajax请求
                },
                beforeSend: function() {
                    // 显示加载中提示
                    $("#td").html("<tr><td colspan='15' class='text-center'><i class='fa fa-spinner fa-spin'></i> 正在加载数据...</td></tr>");
                },
                success: function (res){
                    console.log("学生列表数据:", res);

                    // 如果响应已经是一个对象（jQuery自动解析的JSON）
                    if (typeof res === 'object' && res !== null) {
                        let data = res;

                        if(data.code === 200){
                            // 获取学生数据
                            let data_temp = data.data || [];
                            let totalPages = data.totalPages || 1; // 总页数，默认1
                            let currentPage = data.currentPage || page; // 当前页码

                            console.log("当前页:", currentPage, "总页数:", totalPages);
                            console.log("学生数据:", data_temp);

                            // 清空表格中的旧数据
                            $("#td").empty();

                            // 遍历数据并添加到表格中
                            if (data_temp.length > 0) {
                                for (let i = 0; i < data_temp.length; i++){
                                    $("<tr><td><input type='checkbox' value='" + data_temp[i].studentId + "' name='chk'></td><td>"
                                        + data_temp[i].studentId + "</td><td>"
                                        + data_temp[i].name + "</td><td>"
                                        + data_temp[i].gender + "</td><td>"
                                        + (data_temp[i].birthDate || '') + "</td><td>"
                                        + (data_temp[i].college || '') + "</td><td>"
                                        + (data_temp[i].major || '') + "</td><td>"
                                        + (data_temp[i].className || '') + "</td><td>"
                                        + (data_temp[i].status || '') + "</td><td>"
                                        + (data_temp[i].phone || '') + "</td><td>"
                                        + (data_temp[i].email || '') + "</td><td>"
                                        + "<button class='btn btn-primary btn-sm' onclick='editStudent(\""+ data_temp[i].studentId +"\")'>编辑</button>&nbsp;"
                                        + "<button class='btn btn-danger btn-sm' onclick='deleteStudent1(\""+ data_temp[i].studentId +"\","+currentPage+ ")'>删除</button></td></tr>").appendTo($("#td"));
                                }
                            } else {
                                $("#td").html("<tr><td colspan='15' class='text-center'>没有学生数据</td></tr>");
                            }

                            // 防止页码越界
                            let prevPage = currentPage > 1 ? currentPage - 1 : 1;
                            let nextPage = currentPage < totalPages ? currentPage + 1 : totalPages;

                            // 拼接分页按钮并插入到tfoot
                            $("#tb tfoot td").html(
                                "<button class='btn btn-primary' onclick='initData(1, 10)'>首页</button>&nbsp;&nbsp;" +
                                "<button class='btn btn-primary' onclick='initData(" + prevPage + ", 10)'>上一页</button>&nbsp;&nbsp;" +
                                "<button class='btn btn-primary' onclick='initData(" + nextPage + ", 10)'>下一页</button>&nbsp;&nbsp;" +
                                "<button class='btn btn-primary' onclick='initData(" + totalPages + ", 10)'>尾页</button>&nbsp;&nbsp;" +
                                "当前第" + currentPage + "页，共" + totalPages + "页"
                            );
                        } else {
                            alert("获取数据失败: " + (data.msg || "未知错误"));
                            $("#td").html("<tr><td colspan='15' class='text-center'>加载数据失败</td></tr>");
                            $("#tb tfoot td").html("");
                        }
                    } else {
                        // 如果响应不是有效的JSON对象
                        console.error("服务器返回的不是有效的JSON对象");
                        $("#td").html("<tr><td colspan='15' class='text-center'>服务器返回格式错误，请联系管理员</td></tr>");
                        $("#tb tfoot td").html("");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX请求失败:", status, error);
                    console.error("状态码:", xhr.status);
                    console.error("响应文本:", xhr.responseText);

                    $("#td").html("<tr><td colspan='15' class='text-center'>加载数据失败: " + error + "</td></tr>");
                    $("#tb tfoot td").html("");
                }
            });
        }

        //删除学生
        function deleteStudent1(studentId, page){
            let anw = window.confirm("你确定要删除这名学生吗？")
            console.log("状态值aaaaa",anw)
            if(anw){    //如果为真，点击的是确定按钮
                //删除数据，提交请求到后端
                console.log('数据qq',studentId,page)
                $.ajax({
                    url:'deleteStudent',
                    type: 'post',
                    data: {
                        studentId: studentId,
                        page: page,
                        timestamp: new Date().getTime()
                    },
                    dataType: 'json',
                    success: function (res){
                        console.log("删除响应数据:", res);
                        // 兼容处理字符串和JSON响应
                        let result = res;
                        if (typeof res === 'string') {
                            if (res === 'Y') {
                                result = {success: true};
                            } else {
                                result = {success: false, message: res};
                            }
                        }

                        if (result.success === true || res === 'Y'){
                            alert('学生删除成功')
                            //删除成功后，回到原来的页码
                            initData(page, 10);
                        } else {
                            alert('系统异常或数据已被其他人删除，刷新查看最新数据')
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("删除请求失败:", status, error);
                        console.error("状态码:", xhr.status);
                        console.error("响应文本:", xhr.responseText);
                        alert('系统异常，请稍后重试: ' + error);
                    }
                })

            }else {
                return //程序暂停执行
            }
        }

        // 编辑学生 - 获取学生数据并显示编辑表单
        function editStudent(studentId) {
            console.log("开始编辑学生，ID: " + studentId);
            // 通过AJAX请求获取学生详情
            $.ajax({
                url: 'getStudentById',
                type: 'GET',
                data: {
                    studentId: studentId,
                    timestamp: new Date().getTime() // 添加时间戳防止缓存
                },
                dataType: 'json', // 明确指定期望返回JSON格式
                contentType: 'application/json; charset=utf-8',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(res) {
                    console.log("学生详情数据:", res);

                    // 如果响应已经是一个对象（jQuery自动解析的JSON）
                    if (typeof res === 'object' && res !== null) {
                        let data = res;

                        if (data.code === 200) {
                            // 获取学生数据
                            let student = data.data;
                            console.log("学生数据:", student);

                            if (!student) {
                                alert("学生数据为空");
                                return;
                            }

                            // 将数据填充到表单中
                            $("#editStudentId").val(student.studentId);
                            $("#editName").val(student.name || "");
                            $("#editGender").val(student.gender || "");
                            $("#editBirthDate").val(student.birthDate || "");
                            $("#editIdNumber").val(student.idNumber || "");
                            $("#editCollege").val(student.college || "");
                            $("#editMajor").val(student.major || "");
                            $("#editClassName").val(student.className || "");
                            $("#editStatus").val(student.status || "");
                            $("#editDormId").val(student.dormId || "");
                            $("#editBedNumber").val(student.bedNumber || "");
                            $("#editPhone").val(student.phone || "");
                            $("#editEmail").val(student.email || "");
                            $("#editEmergencyContact").val(student.emergencyContact || "");
                            $("#editUsername").val(student.username || "");
                            // 不显示密码，设为空或占位符
                            $("#editPassword").val("");

                            // 显示编辑模态框
                            $("#editModal").modal('show');
                        } else {
                            alert('获取学生信息失败: ' + (data.message || '未知错误'));
                        }
                    } else {
                        // 如果响应不是有效的JSON对象
                        console.error("服务器返回的不是有效的JSON对象");
                        alert('系统异常，请稍后重试');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX请求失败:", status, error);
                    console.error("状态码:", xhr.status);
                    console.error("响应文本:", xhr.responseText);
                    alert('系统异常，请稍后重试: ' + error);
                }
            });
        }

        // 保存编辑后的学生数据
        function saveStudent() {
            // 获取表单数据
            let studentId = $("#editStudentId").val();
            let name = $("#editName").val();
            let gender = $("#editGender").val();
            let birthDate = $("#editBirthDate").val();
            let idNumber = $("#editIdNumber").val();
            let college = $("#editCollege").val();
            let major = $("#editMajor").val();
            let className = $("#editClassName").val();
            let status = $("#editStatus").val();
            let dormId = $("#editDormId").val();
            let bedNumber = $("#editBedNumber").val();
            let phone = $("#editPhone").val();
            let email = $("#editEmail").val();
            let emergencyContact = $("#editEmergencyContact").val();
            let username = $("#editUsername").val();
            let password = $("#editPassword").val();

            console.log("准备保存的学生数据:", {studentId, name, gender});

            // 表单验证
            if (!name || !gender) {
                alert('学生姓名和性别不能为空');
                return;
            }

            // 构建请求数据对象
            const studentData = {
                studentId: studentId,
                name: name,
                gender: gender,
                birthDate: birthDate,
                idNumber: idNumber,
                college: college,
                major: major,
                className: className,
                status: status,
                dormId: dormId,
                bedNumber: bedNumber,
                phone: phone,
                email: email,
                emergencyContact: emergencyContact,
                username: username
            };

            // 仅当密码不为空时才添加到请求中
            if (password) {
                studentData.password = password;
            }

            // 发送请求保存数据
            $.ajax({
                url: 'updateStudent',
                type: 'POST',
                data: studentData,
                dataType: 'json',
                success: function(res) {
                    console.log("更新学生响应:", res);
                    // 检查响应格式，兼容处理字符串和JSON对象
                    let result = res;
                    if (typeof res === 'string') {
                        if (res === 'Y') {
                            result = {success: true};
                        } else {
                            result = {success: false, message: res};
                        }
                    }

                    if (result.success === true || res === 'Y') {
                        alert('学生信息更新成功');
                        // 关闭模态框
                        $("#editModal").modal('hide');
                        // 刷新学生列表
                        initData(1, 10);
                    } else {
                        alert('学生信息更新失败，请重试');
                    }
                },
                error: function(xhr, status, error) {
                    console.error("更新请求失败:", status, error);
                    console.error("状态码:", xhr.status);
                    console.error("响应文本:", xhr.responseText);
                    alert('系统异常，请稍后重试: ' + error);
                }
            });
        }
    </script>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">学生信息管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入学生姓名或学号" onblur="initData(1,10,this.value)">
                    <button class="btn btn-danger" style="margin-left: 40px" onclick="deleteMultiple()">批量删除</button>
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<table class="table table-striped table-bordered table-hover" id="tb">
    <thead>
    <th><input type="checkbox" id="selectAll" onclick="toggleSelectAll()"></th>
    <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>出生日期</th>
    <th>学院</th>
    <th>专业</th>
    <th>班级</th>
    <th>状态</th>
    <th>手机号</th>
    <th>邮箱</th>
    <th>操作</th>
    </thead>
    <tbody id="td">
    </tbody>
    <tfoot>
    <tr>
        <td colspan="12" style="text-align: center">
        </td>
    </tr>
    </tfoot>
</table>

<!-- 编辑学生的模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">编辑学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal">
                    <input type="hidden" id="editStudentId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="editName" class="col-sm-4 control-label">姓名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editName" placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editGender" class="col-sm-4 control-label">性别</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="editGender">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editBirthDate" class="col-sm-4 control-label">出生日期</label>
                                <div class="col-sm-8">
                                    <input type="date" class="form-control" id="editBirthDate">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editIdNumber" class="col-sm-4 control-label">身份证号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editIdNumber" placeholder="身份证号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editCollege" class="col-sm-4 control-label">学院</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editCollege" placeholder="学院">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editMajor" class="col-sm-4 control-label">专业</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editMajor" placeholder="专业">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editClassName" class="col-sm-4 control-label">班级</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editClassName" placeholder="班级">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editStatus" class="col-sm-4 control-label">状态</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="editStatus">
                                        <option value="在读">在读</option>
                                        <option value="休学">休学</option>
                                        <option value="退学">退学</option>
                                        <option value="毕业">毕业</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="editDormId" class="col-sm-4 control-label">宿舍号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editDormId" placeholder="宿舍号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editBedNumber" class="col-sm-4 control-label">床位号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editBedNumber" placeholder="床位号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editPhone" class="col-sm-4 control-label">手机号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editPhone" placeholder="手机号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editEmail" class="col-sm-4 control-label">邮箱</label>
                                <div class="col-sm-8">
                                    <input type="email" class="form-control" id="editEmail" placeholder="邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editEmergencyContact" class="col-sm-4 control-label">紧急联系人</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editEmergencyContact" placeholder="紧急联系人">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editUsername" class="col-sm-4 control-label">用户名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="editUsername" placeholder="用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="editPassword" class="col-sm-4 control-label">密码</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="editPassword" placeholder="不修改请留空">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script>
    // 尝试清理和修复可能不标准的JSON字符串
    function tryCleanJson(jsonStr) {
        // 如果为空，直接返回
        if (!jsonStr) return jsonStr;

        // 检查是否有UTF-8 BOM标记并去除
        if (jsonStr.charCodeAt(0) === 0xFEFF || jsonStr.charCodeAt(0) === 0xEF ||
            jsonStr.charAt(0) === '\uFEFF' || jsonStr.charAt(0) === 'ï' ||
            jsonStr.charAt(0) === 'Ǵ' || jsonStr.charAt(0) === '\uFFFD') {
            console.log("检测到非标准字符前缀，尝试移除");
            jsonStr = jsonStr.substring(1);
        }

        // 尝试移除JSON字符串前的所有非标准字符
        const jsonStart = jsonStr.indexOf('{');
        if (jsonStart > 0) {
            console.log(`检测到JSON实际开始于位置 ${jsonStart}，尝试移除前缀`);
            jsonStr = jsonStr.substring(jsonStart);
        }

        // 确保JSON字符串以 { 开头
        if (!jsonStr.startsWith('{')) {
            console.error("清理后的字符串仍不是有效的JSON格式");
            return null;
        }

        return jsonStr;
    }

    // 根据关键字查询学生
    function queryData(keywords){

        // 如果关键字为空，则恢复显示所有学生
        if(keywords == ''){
            initData(1, 10);
            return;
        }

        $.ajax({
            url:"list",
            type:'get',
            data:{
                name: name,
                timestamp: new Date().getTime() // 添加时间戳防止缓存
            },
            dataType: 'json', // 明确指定期望返回JSON格式
            contentType: 'application/json; charset=utf-8', // 指定内容类型
            headers: {
                'Accept': 'application/json', // 明确告诉服务器我们期望JSON响应
                'X-Requested-With': 'XMLHttpRequest' // 标识这是一个Ajax请求
            },
            beforeSend: function() {
                // 显示加载中提示
                $("#td").html("<tr><td colspan='12' class='text-center'><i class='fa fa-spinner fa-spin'></i> 正在加载数据...</td></tr>");
            },
            success: function (res){
                console.log("搜索结果:", res);

                // 如果响应已经是一个对象（jQuery自动解析的JSON）
                if (typeof res === 'object' && res !== null) {
                    let data = res;

                    if(data.code == 200){
                        // 清空表格数据
                        $("#td").empty();

                        // 获取数据
                        let data_temp = data.data || [];

                        if (data_temp.length > 0) {
                            // 遍历数据并添加到表格
                            for (let i = 0; i < data_temp.length; i++){
                                $("<tr><td><input type='checkbox' value='" + data_temp[i].studentId + "' name='chk'></td><td>"
                                    + data_temp[i].studentId + "</td><td>"
                                    + data_temp[i].name + "</td><td>"
                                    + data_temp[i].gender + "</td><td>"
                                    + (data_temp[i].birthDate || '') + "</td><td>"
                                    + (data_temp[i].college || '') + "</td><td>"
                                    + (data_temp[i].major || '') + "</td><td>"
                                    + (data_temp[i].className || '') + "</td><td>"
                                    + (data_temp[i].status || '') + "</td><td>"
                                    + (data_temp[i].phone || '') + "</td><td>"
                                    + (data_temp[i].email || '') + "</td><td>"
                                    + "<button class='btn btn-primary btn-sm' onclick='editStudent(\""+ data_temp[i].studentId +"\")'>编辑</button>&nbsp;"
                                    + "<button class='btn btn-danger btn-sm' onclick='deleteStudent(\""+ data_temp[i].studentId +"\", 1)'>删除</button></td></tr>").appendTo($("#td"));
                            }

                            // 搜索结果不分页，所以简化分页按钮
                            $("#tb tfoot td").html(
                                "<button class='btn btn-primary' onclick='initData(1, 10)'>返回全部学生</button>&nbsp;&nbsp;" +
                                "搜索结果：找到 " + data_temp.length + " 条记录"
                            );
                        } else {
                            // 没有查询结果
                            $("#td").html("<tr><td colspan='12' class='text-center'>没有找到符合条件的学生</td></tr>");
                            $("#tb tfoot td").html(
                                "<button class='btn btn-primary' onclick='initData(1, 10)'>返回全部学生</button>"
                            );
                        }
                    } else {
                        alert("搜索失败: " + (data.msg || "未知错误"));
                        $("#td").html("<tr><td colspan='12' class='text-center'>搜索失败</td></tr>");
                        $("#tb tfoot td").html(
                            "<button class='btn btn-primary' onclick='initData(1, 10)'>返回全部学生</button>"
                        );
                    }
                } else {
                    // 如果响应不是有效的JSON对象
                    console.error("服务器返回的不是有效的JSON对象");
                    $("#td").html("<tr><td colspan='12' class='text-center'>服务器返回格式错误，请联系管理员</td></tr>");
                    $("#tb tfoot td").html("<button class='btn btn-primary' onclick='initData(1, 10)'>返回全部学生</button>");
                }
            },
            error: function(xhr, status, error) {
                console.error("搜索请求失败:", status, error);
                console.error("状态码:", xhr.status);
                console.error("响应文本:", xhr.responseText);

                $("#td").html("<tr><td colspan='12' class='text-center'>搜索失败: " + error + "</td></tr>");
                $("#tb tfoot td").html(
                    "<button class='btn btn-primary' onclick='initData(1, 10)'>返回全部学生</button>"
                );
            }
        });
    }

    function deleteMultiple(){
        // 获取所有选中的复选框
        let checkboxes = document.getElementsByName('chk');
        let selectedIds = [];

        // 收集所有选中的学生ID
        for (let i = 0; i < checkboxes.length; i++){
            if(checkboxes[i].checked){
                selectedIds.push(checkboxes[i].value);
            }
        }

        // 检查是否有选中的学生
        if (selectedIds.length === 0) {
            alert('请至少选择一个学生');
            return;
        }

        // 确认删除
        if (confirm('确定要删除选中的 ' + selectedIds.length + ' 名学生吗？')) {
            // 这里可以添加批量删除的AJAX请求
            console.log('要删除的学生ID:', selectedIds);
            $.ajax({
                url: 'deleteMultipleStudents',
                type: 'POST',
                data: {
                    studentIds: selectedIds.join(','),
                    timestamp: new Date().getTime()
                },
                dataType: 'json',
                success: function(res) {
                    if (res.success) {
                        alert('批量删除成功');
                        initData(1, 10);
                    } else {
                        alert('批量删除失败: ' + (res.message || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    console.error("批量删除请求失败:", status, error);
                    alert('系统异常，请稍后重试: ' + error);
                }
            });
        }
    }

    // 全选/取消全选功能
    function toggleSelectAll() {
        // 获取主复选框的状态
        let mainCheckbox = document.getElementById('selectAll');
        let isChecked = mainCheckbox.checked;

        // 获取所有名为chk的复选框
        let checkboxes = document.getElementsByName('chk');

        // 设置所有复选框的状态与主复选框一致
        for (let i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = isChecked;
        }
    }
</script>